<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <div style="margin-top:10px">
          <el-button type="primary" @click="visible2 = true" style="float:left">导出数据</el-button>
          <el-button @click="addNewRecord" type="primary">添加网格员</el-button>
          <el-input style="width:200px" v-model="filters.name" placeholder="请输入网格员姓名"></el-input>
          <el-input style="width:200px" v-model="filters.certID" placeholder="请输入网格员身份证"></el-input>
          <el-button type="primary" icon="search" @click="getInfo">搜索</el-button>
          <el-button type="primary" @click="flushAll">刷新</el-button>
        </div>
        <el-row style="margin-top:20px">
          <el-col :span="$store.getters.user.userRole=='超级管理员'?3:0">
            <treeComponent style="margin-top:-52px" @GetNodeValue="GetNodeValue"></treeComponent>
          </el-col>
          <el-col :span="$store.getters.user.userRole=='超级管理员'?21:24">
            <el-table :data="list">
              <el-table-column type="index" width="100"></el-table-column>
              <el-table-column v-for="(v,k,i) in props" :key="i" :label="labels[i]" align="center">
                <template scope="scope">
                  <span v-if="k==='sex'">
                    {{getSex(scope.row[k])}}
                  </span>
                  <span v-else-if="k==='netGridName'">
                    {{scope.row.fatherNetGridName+"->"+scope.row[k]}}
                  </span>
                  <span v-else>
                    {{scope.row[k]}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template scope="scope">
                  <el-button type="text" @click="ckDetail(scope.row.netGridMemberID)">查看详情</el-button>
                  <el-button type="text" @click="editInfo(scope.row.netGridMemberID)">编辑</el-button>
                  <el-button type="text" @click="deleteInfo(scope.row.netGridMemberID)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" style="margin-top:10px" :total="totalInfo" @current-change="handleCurrentChange">
            </el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="网格员详细信息" :visible.sync="visible">
      <info-template :item="form" :names="labels2" hasimg :imgUrl="img"></info-template>
    </el-dialog>

    <el-dialog title="导出数据" :visible.sync="visible2" size="tiny">
      <el-row>
        <el-col :span="24">
          请选择要导出的字段【注意请按照你想要的顺序依次进行选择】:
        </el-col>

        <el-col :span="24" style="padding-top:20px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkTitles">
            <el-checkbox style="width:200px;margin-left:10px" @change="setValue(v)" v-for="(v,i) in prop" :key="i" :label="v.label"></el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="24" style="padding-top:20px">
          你已选择的字段:{{checkTitles}}
        </el-col>
        <el-col :span="24" style="padding-top:20px" align="center">
          <el-button type="warning" @click="visible2=false">取消</el-button>
          <el-button type="primary" @click="exportData">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import treeComponent from "../../components/common/treeComponent";
import * as api from "@/api/netGridManage";
import infoTemplate from "../../components/InfoTemplate/index";
import JSONToCSV from "../../utils/jsonToCSV.js";
export default {
  components: {
    treeComponent: treeComponent,
    infoTemplate: infoTemplate
  },
  watch: {
    visible2: function(val) {
      if (val == false) {
        this.checkTitles = [];
        this.checkValues = [];
      }
    }
  },
  data() {
    return {
      isIndeterminate: true,
      visible: false,
      visible2: false,
      filters: {
        name: null, //驾驶员姓名
        certID: null, //驾驶员身份证号
        netGridID: null, // 所属网格
        page: 1,
        pageSize: 10
      },
      checkAll: false,
      checkTitles: [],
      checkValues: [],
      list: [
        {
          netGridMemberID: "", //      bigint not null auto_increment,
          netGridID: "", //            bigint,
          name: "", //                varchar(50),
          sex: "", //                  int comment '值=1，代表男性；值=0，代表女性。',
          ethnicity: "", //            varchar(20) comment '民族',
          politics: "", //             varchar(20) comment '政治面貌',
          certID: "", //               varchar(18),
          birthDate: "", //            date,
          education: "", //            varchar(10) comment '学历',
          mobileTel: "", //            varchar(18) comment '移动电话',
          fixedTel: "" //             varchar(18) comment '固定电话',
        }
      ],
      totalInfo: 0,
      props: {
        name: "", //                varchar(50),
        sex: "", //                  int comment '值=1，代表男性；值=0，代表女性。',
        certID: "", //               varchar(18),
        mobileTel: "", //            varchar(18) comment '移动电话',
        netGridName: ""
      },
      form: {},
      labels: ["姓名", "性别", "身份证", "移动电话", "所属网格"],
      prop: [
        {
          name: "name",
          label: "姓名"
        },
        {
          name: "sex",
          label: "性别"
        },
        {
          name: "ethnicityName",
          label: "民族"
        },
        {
          name: "politicsTypeName",
          label: "政治面貌"
        },
        {
          name: "certID",
          label: "身份证"
        },
        {
          name: "netGridID",
          label: "所属网格"
        },
        {
          name: "birthDate",
          label: "出生日期"
        },
        {
          name: "educationTypeName",
          label: "学历"
        },
        {
          name: "mobileTel",
          label: "移动电话"
        },
        {
          name: "fixedTel",
          label: "固定电话"
        },
        {
          name: "position",
          label: "职位"
        }
      ],
      labels2: [
        "编号",
        "上级网格",
        "所属网格",
        "姓名",
        "性别",
        "民族",
        "政治面貌",
        "身份证",
        "出生日期",
        "学历",
        "移动电话",
        "固定电话",
        "职位"
      ],
      img: ""
    };
  },
  methods: {
    handleCheckAllChange(event) {
      if (this.checkAll) {
        this.checkTitles = [];
        this.prop.forEach(k => {
          this.checkTitles.push(k.label);
        });
        this.checkValues = [...this.prop];
      } else {
        this.checkTitles = [];
        this.checkValues = [];
      }
      this.isIndeterminate = false;
    },
    setValue(v) {
      let index;
      console.log(this.checkValues);
      let f = this.checkValues.some((k, i) => {
        if (v.label == k.label) {
          index = i;
          return true;
        }
      });
      if (!f) this.checkValues.push(v);
      else this.checkValues.splice(index, 1);
    },
    async exportData() {
      let { data } = await api.getNetGridMemberForExcel(this.filters);
      let keys = [];
      this.checkTitles = [];
      this.checkValues.forEach(v => {
        keys.push(v.name);
        this.checkTitles.push(v.label);
      });

      new Promise((resolve) => {
        JSONToCSV.setDataConver({
          data: data,
          fileName: "网格员信息",
          columns: {
            title: this.checkTitles,
            key: keys,
            formatter: (k, v, row)=>{
              if (k == "certID" || k == "mobileTel" || k == "fixedTel")
                return v + "\t";
              else if (k == "netGridID") {
                return row.fatherNetGridName + "->" + row.netGridName;
              } else if (v == undefined || v == null) {
                return "\t";
              } else if (k == 'sex'){
                return this.getSex(v);
              }
            }
          }
        });
        resolve();
      }).then(() => {
        this.visible2 = false;
      });
    },
    getSex(val) {
      switch (val) {
        case 0:
          return "未知的性别";
        case 1:
          return "男性";
        case 2:
          return "女性";
        case 99:
          return "未说明性别";
      }
    },
    deleteInfo(id) {
      this.$confirm("是否删除此网格员信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.deleteById(id).then(res => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getInfo();
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    flushAll() {
      this.filters.name = this.filters.certID = null;
      this.getInfo();
    },
    handleCurrentChange(val) {
      this.filters.page = val;
      this.getInfo();
    },
    ckDetail(id) {
      this.visible = true;
      api.getNetGridMemberDetail(id).then(res => {
        this.form = res.data.memberDetail;
        this.img = res.data.photoPath;
      });
    },
    addNewRecord() {
      this.$router.push("add");
    },
    GetNodeValue(val) {
      this.filters.netGridID = val;
      this.getInfo();
    },
    editInfo(id) {
      this.$router.push({ path: "edit", query: { id: id } });
    },
    getInfo() {
      api.getInfoByPage(this.filters).then(res => {
        this.list = res.data.vos;
        this.totalInfo = res.data.p.totalCount;
      });
      // this.filters.name = this.filters.certID = this.filters.netGridID = null;
    }
  },
  mounted() {
    if (this.$store.getters.user.userRole != "超级管理员")
      this.filters.netGridID = this.$store.getters.user.netGridID;
    this.getInfo();
  }
};
</script>


<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  padding: 10px;
}

.tb_label {
  width: 20%;
  text-align: right;
}
</style>
